<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../resources/css/calling/pages/sjksh.css?1">
    <title>业务员办理叫号</title>
</head>

<body class="bigScreenBody">
    <!-- 头部固定区域 -->
    <header class="bigScreenHeader" id="pageHeader">
        <div style="height: 100%;" class="flex align-center justify-between">
            <div class="header-left-box flex align-center">
                <img src="../resources/images/logo.png" alt="">
                <h3>师生服务大厅运行概况</h3>
            </div>
            <div class="header-right-box clearfix">
                <div class="header-right-time" id="datetime"></div>
                <div class="header-right-btn flex align-center">
                    <a href="javascript:;">线上大厅</a>
                    <a href="javascript:;" class="active">线下大厅</a>
                </div>
            </div>
        </div>
    </header>
    <div class="bigScreenHeaderDiv"></div>
    <script>
        // 页面滚动时处理头部样式
        window.addEventListener('scroll', function() {
            const headerDiv = document.querySelector('.bigScreenHeaderDiv');
            if (window.scrollY > 0) {
                // 页面已滚动，添加固定定位和背景色
                headerDiv.style.position = 'fixed';
                headerDiv.style.top = '0';
                headerDiv.style.left = '0';
                headerDiv.style.width = '100%';
                headerDiv.style.zIndex = '100';
                headerDiv.style.background = 'rgba(0, 0, 0, 0.9)';
            } else {
                // 页面在顶部，恢复正常
                headerDiv.style.position = '';
                headerDiv.style.top = '';
                headerDiv.style.left = '';
                headerDiv.style.width = '';
                headerDiv.style.zIndex = '';
                headerDiv.style.background = '';
            }
        });
    </script>
    <!-- 内容区域 -->
    <main class="contentMain">
        <div class="contentBox">
            <div class="chunk-box-one mb clearfix">
                <div class="box-one-left">
                    <!--总体概况-->
                    <div class="gradient-border">
                        <!-- 四角小正方形 -->
                        <div class="complete-square square-tl"></div>
                        <div class="complete-square square-tr"></div>
                        <div class="complete-square square-bl"></div>
                        <div class="complete-square square-br"></div>
                        <div class="main-container realTimeOverviewMain">
                            <div class="titleBox flex align-center">
                                <img src="../resources/images/titleBeforeImg.png" alt="" />
                                实时概况
                                <img src="../resources/images/titleImg.png" alt="" />
                            </div>
                            <div class="main-content situationBox">
                                <!-- 小块 box -->
                                <div class="statisticsListBox">
                                    <!-- 小块1 -->
                                    <div class="statisticsItemBox">
                                        <img src="../resources/images/one-icon-01.png" alt="" />
                                        <div class="itemText">
                                            <div class="whiteSm text-sm md:text-base">今日窗口业务办理量</div>
                                            <div class="numberText">
                                                342
                                                <span>件</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 小块2 -->
                                    <div class="statisticsItemBox">
                                        <img src="../resources/images/one-icon-02.png" alt="" />
                                        <div class="itemText">
                                            <div class="whiteSm">今日咨询量</div>
                                            <div class="numberText">
                                                342
                                                <span>次</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 小块3 -->
                                    <div class="statisticsItemBox">
                                        <img src="../resources/images/one-icon-03.png" alt="" />
                                        <div class="itemText">
                                            <div class="whiteSm">今日现场取号数</div>
                                            <div class="numberText">
                                                32
                                                <span>人次</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 小块4 -->
                                    <div class="statisticsItemBox">
                                        <img src="../resources/images/one-icon-04.png" alt="" />
                                        <div class="itemText">
                                            <div class="whiteSm">今日预约取号数</div>
                                            <div class="numberText">
                                                150
                                                <span>人次</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 滚动卡片容器 -->
                                <div class="scroll-cards-container">
                                    <div class="scroll-cards-wrapper" id="scrollCardsWrapper">
                                        <!-- 卡片将通过JavaScript动态生成 -->
                                    </div>
                                    <script>
                                        // 窗口服务数据
                                        var serviceCardData = [
                                            { windowNumber: '窗口1', serviceName: '学校印信服务', status: '正常服务', currentNumber: 25, waitingCount: 12, totalCount: 278 },
                                            { windowNumber: '窗口2', serviceName: '学生证办理', status: '正常服务', currentNumber: 18, waitingCount: 5, totalCount: 156 },
                                            { windowNumber: '窗口3', serviceName: '一卡通服务', status: '正常服务', currentNumber: 32, waitingCount: 8, totalCount: 312 },
                                            { windowNumber: '窗口4', serviceName: '校园网服务', status: '暂停服务', currentNumber: 0, waitingCount: 0, totalCount: 189 },
                                            { windowNumber: '窗口5', serviceName: '宿舍管理', status: '正常服务', currentNumber: 15, waitingCount: 3, totalCount: 205 },
                                            { windowNumber: '窗口6', serviceName: '教务服务', status: '正常服务', currentNumber: 27, waitingCount: 9, totalCount: 267 },
                                            { windowNumber: '窗口7', serviceName: '财务缴费', status: '正常服务', currentNumber: 41, waitingCount: 14, totalCount: 325 },
                                            { windowNumber: '窗口8', serviceName: '图书借阅', status: '正常服务', currentNumber: 19, waitingCount: 4, totalCount: 178 },
                                            { windowNumber: '窗口9', serviceName: '就业服务', status: '正常服务', currentNumber: 23, waitingCount: 7, totalCount: 231 },
                                            { windowNumber: '窗口10', serviceName: '心理咨询', status: '暂停服务', currentNumber: 0, waitingCount: 0, totalCount: 142 },
                                            { windowNumber: '窗口11', serviceName: '医疗保险', status: '正常服务', currentNumber: 36, waitingCount: 11, totalCount: 289 },
                                            { windowNumber: '窗口12', serviceName: '国际交流', status: '正常服务', currentNumber: 14, waitingCount: 2, totalCount: 167 }
                                        ];

                                        // 渲染服务卡片
                                        function renderServiceCards() {
                                            var scrollCardsWrapper = document.getElementById('scrollCardsWrapper');
                                            var htmlStr = '';
                                            
                                            for (var i = 0; i < serviceCardData.length; i++) {
                                                var card = serviceCardData[i];
                                                
                                                htmlStr = htmlStr + '<div class="service-card corner-border">';
                                                htmlStr = htmlStr + '<em class="corner-border-top-left"></em>';
                                                htmlStr = htmlStr + '<em class="corner-border-top-right"></em>';
                                                htmlStr = htmlStr + '<em class="corner-border-bottom-left"></em>';
                                                htmlStr = htmlStr + '<em class="corner-border-bottom-right"></em>';
                                                
                                                htmlStr = htmlStr + '<div class="card-header">';
                                                htmlStr = htmlStr + '<div class="window-number">' + card.windowNumber + '</div>';
                                                htmlStr = htmlStr + '<div class="service-name">' + card.serviceName + '</div>';
                                                htmlStr = htmlStr + '<span>' + card.status + '</span>';
                                                htmlStr = htmlStr + '</div>';
                                                
                                                htmlStr = htmlStr + '<div class="card-content">';
                                                
                                                htmlStr = htmlStr + '<div class="card-row">';
                                                htmlStr = htmlStr + '<span class="label">当前叫号</span>';
                                                htmlStr = htmlStr + '<span class="value">' + card.currentNumber + '</span>';
                                                htmlStr = htmlStr + '</div>';
                                                
                                                htmlStr = htmlStr + '<div class="card-row">';
                                                htmlStr = htmlStr + '<span class="label">等待人数</span>';
                                                htmlStr = htmlStr + '<span class="value">' + card.waitingCount + '</span>';
                                                htmlStr = htmlStr + '</div>';
                                                
                                                htmlStr = htmlStr + '<div class="card-row">';
                                                htmlStr = htmlStr + '<span class="label">共计办理数</span>';
                                                htmlStr = htmlStr + '<span class="value">' + card.totalCount + '</span>';
                                                htmlStr = htmlStr + '</div>';
                                                
                                                htmlStr = htmlStr + '</div>';
                                                htmlStr = htmlStr + '</div>';
                                            }
                                            
                                            scrollCardsWrapper.innerHTML = htmlStr;
                                        }
                                        
                                        // 页面加载完成后执行渲染
                                        document.addEventListener('DOMContentLoaded', function() {
                                            renderServiceCards();
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-one-right">
                    <!-- 今日取号时间趋势 -->
                    <div class="gradient-border h290 mb">
                        <!-- 四角小正方形 -->
                        <div class="complete-square square-tl"></div>
                        <div class="complete-square square-tr"></div>
                        <div class="complete-square square-bl"></div>
                        <div class="complete-square square-br"></div>
                        <div class="main-container">
                            <div class="titleBox flex align-center">
                                <img src="../resources/images/titleBeforeImg.png" alt="" />
                                今日取号时间趋势
                                <img src="../resources/images/titleImg.png" alt="" />
                            </div>
                            <div class="main-content">
                                <div id="right-line1" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 今日窗口业务办理趋势 -->
                    <div class="gradient-border h290">
                        <!-- 四角小正方形 -->
                        <div class="complete-square square-tl"></div>
                        <div class="complete-square square-tr"></div>
                        <div class="complete-square square-bl"></div>
                        <div class="complete-square square-br"></div>
                        <div class="main-container">
                            <div class="titleBox flex align-center">
                                <img src="../resources/images/titleBeforeImg.png" alt="" />
                                今日窗口业务办理趋势
                                <img src="../resources/images/titleImg.png" alt="" />
                            </div>
                            <div class="main-content">
                                <div id="right-line2" class="chart-container"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chunk-box-two clearfix">
                <div class="box-two-left">
                    <div class="two-left-one">
                        <!-- 本年度累计业务办理量 -->
                        <div class="gradient-border mb h185">
                            <!-- 四角小正方形 -->
                            <div class="complete-square square-tl"></div>
                            <div class="complete-square square-tr"></div>
                            <div class="complete-square square-bl"></div>
                            <div class="complete-square square-br"></div>
                            <div class="main-container">
                                <div class="titleBox flex align-center">
                                    <img src="../resources/images/titleBeforeImg.png" alt="" />
                                    本年度累计业务办理量
                                    <img src="../resources/images/titleImg.png" alt="" />
                                </div>
                                <div class="main-content">
                                    <!-- 美化数字分位显示 -->
                                    <div class="total-number-container">
                                        <div id="total-number" class="total-number">
                                            <!-- 数字位通过JS动态生成 -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 本月数据统计 -->
                        <div class="gradient-border h421">
                            <!-- 四角小正方形 -->
                            <div class="complete-square square-tl"></div>
                            <div class="complete-square square-tr"></div>
                            <div class="complete-square square-bl"></div>
                            <div class="complete-square square-br"></div>
                            <div class="main-container">
                                <div class="titleBox flex align-center">
                                    <img src="../resources/images/titleBeforeImg.png" alt="" />
                                    本月数据统计
                                    <img src="../resources/images/titleImg.png" alt="" />
                                </div>
                                <div class="main-content">
                                    <div class="quantitativeBox clearfix" id="quantitativeBox">
                                        <!-- 这里将通过JavaScript动态渲染 -->
                                    </div>
                                </div>
                                
                                <script>
                                    // 本月数据统计数据
                                    var quantitativeItems = [
                                        { id: 1, icon: '../resources/images/two-icon-01.png', title: '线上预约总数', count: 150, unit: '人次' },
                                        { id: 2, icon: '../resources/images/two-icon-02.png', title: '线下取号总数', count: 342, unit: '人次' },
                                        { id: 3, icon: '../resources/images/two-icon-03.png', title: '窗口业务办理总数', count: 256, unit: '件' },
                                        { id: 4, icon: '../resources/images/two-icon-04.png', title: '咨询总量', count: 189, unit: '次' },
                                        { id: 5, icon: '../resources/images/two-icon-05.png', title: '日均办理量', count: 320, unit: '件' },
                                        { id: 6, icon: '../resources/images/two-icon-06.png', title: '最高峰值', count: 98, unit: '件' }
                                    ];

                                    // 渲染本月数据统计
                                    function renderQuantitativeBox() {
                                        var quantitativeBox = document.getElementById('quantitativeBox');
                                        var htmlStr = '';
                                        
                                        for (var i = 0; i < quantitativeItems.length; i++) {
                                            var item = quantitativeItems[i];
                                            htmlStr = htmlStr + '<div class="quantitativeItem flex align-center">';
                                            htmlStr = htmlStr + '<img src="' + item.icon + '" alt="">';
                                            htmlStr = htmlStr + '<div class="infoBox">';
                                            htmlStr = htmlStr + '<div class="itemText">' + item.title + '</div>';
                                            htmlStr = htmlStr + '<div class="itemNum">';
                                            htmlStr = htmlStr + item.count + ' <span>' + item.unit + '</span>';
                                            htmlStr = htmlStr + '</div>';
                                            htmlStr = htmlStr + '</div>';
                                            htmlStr = htmlStr + '</div>';
                                        }
                                        
                                        quantitativeBox.innerHTML = htmlStr;
                                    }
                                    
                                    // 页面加载完成后执行渲染
                                    document.addEventListener('DOMContentLoaded', function() {
                                        renderQuantitativeBox();
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                    <div class="two-left-two">
                        <!-- 近七日窗口业务办理量 -->
                        <div class="gradient-border mb h320">
                            <!-- 四角小正方形 -->
                            <div class="complete-square square-tl"></div>
                            <div class="complete-square square-tr"></div>
                            <div class="complete-square square-bl"></div>
                            <div class="complete-square square-br"></div>
                            <div class="main-container">
                                <div class="titleBox flex align-center">
                                    <img src="../resources/images/titleBeforeImg.png" alt="" />
                                    近7日窗口业务办理量
                                    <img src="../resources/images/titleImg.png" alt="" />
                                </div>
                                <div class="main-content">
                                    <div id="right-bar2" class="chart-container"></div>
                                </div>
                            </div>

                        </div>
                        <!-- 近七日申办人员类型 -->
                        <div class="gradient-border h286">
                            <!-- 四角小正方形 -->
                            <div class="complete-square square-tl"></div>
                            <div class="complete-square square-tr"></div>
                            <div class="complete-square square-bl"></div>
                            <div class="complete-square square-br"></div>
                            <div class="main-container">
                                <div class="titleBox flex align-center">
                                    <img src="../resources/images/titleBeforeImg.png" alt="" />
                                    近7日申办人员类型
                                    <img src="../resources/images/titleImg.png" alt="" />
                                </div>
                                <div class="main-content">
                                    <div id="left-bar3" class="chart-container"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-two-right">
                    <!-- 近7日热门服务事项TOP5 -->
                    <div class="gradient-border mb h320">
                        <!-- 四角小正方形 -->
                        <div class="complete-square square-tl"></div>
                        <div class="complete-square square-tr"></div>
                        <div class="complete-square square-bl"></div>
                        <div class="complete-square square-br"></div>
                        <div class="main-container">
                            <div class="titleBox flex align-center">
                                <img src="../resources/images/titleBeforeImg.png" alt="" />
                                近7日热门服务事项TOP5
                                <img src="../resources/images/titleImg.png" alt="" />
                            </div>
                            <div class="main-content">
                                <div class="topListBox" id="topListBox">
                                    <!-- 这里将通过JavaScript动态渲染 -->
                                </div>

                                <script>
                                    // 热门服务事项数据
                                    var topItems = [
                                        { id: 1, name: '一卡通申请', count: 99, percent: 50 },
                                        { id: 2, name: '社保卡办理', count: 85, percent: 42 },
                                        { id: 3, name: '公积金查询', count: 76, percent: 38 },
                                        { id: 4, name: '医保报销', count: 65, percent: 32 },
                                        { id: 5, name: '营业执照办理', count: 52, percent: 26 }
                                    ];

                                    // 渲染TOP5列表
                                    function renderTopList() {
                                        var topListBox = document.getElementById('topListBox');
                                        var htmlStr = '';

                                        for (var i = 0; i < topItems.length; i++) {
                                            var item = topItems[i];
                                            htmlStr += '<div class="topItemBox">';
                                            htmlStr += '    <div class="textBox flex align-center justify-between">';
                                            htmlStr += '        <div class="flex align-center">';
                                            htmlStr += '            <img src="../resources/images/top' + item.id + 'Img.png" alt="">';
                                            htmlStr += '            <span>' + item.name + '</span>';
                                            htmlStr += '        </div>';
                                            htmlStr += '        <em>' + item.count + '</em>';
                                            htmlStr += '    </div>';
                                            htmlStr += '    <div class="processBox">';
                                            htmlStr += '        <div style="width: ' + item.percent + '%;"></div>';
                                            htmlStr += '    </div>';
                                            htmlStr += '</div>';
                                        }

                                        topListBox.innerHTML = htmlStr;
                                    }

                                    // 页面加载完成后执行渲染
                                    window.addEventListener('DOMContentLoaded', function () {
                                        renderTopList();
                                    });
                                </script>
                            </div>

                        </div>
                    </div>
                    <!-- 未来7天预约量趋势 -->
                    <div class="gradient-border h286">
                        <!-- 四角小正方形 -->
                        <div class="complete-square square-tl"></div>
                        <div class="complete-square square-tr"></div>
                        <div class="complete-square square-bl"></div>
                        <div class="complete-square square-br"></div>
                        <div class="main-container">
                            <div class="titleBox flex align-center">
                                <img src="../resources/images/titleBeforeImg.png" alt="" />
                                未来7天预约量趋势
                                <img src="../resources/images/titleImg.png" alt="" />
                            </div>
                            <div class="main-content">
                                <div id="right-line3" class="chart-container"></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="../resources/js/echarts.min.js"></script>
    <script type="text/javascript">
        // 移除window.onload，使用DOMContentLoaded事件监听器

        // 全局变量，用于存储当前显示的数字和数字位容器
        let currentDisplayNumber = 0;
        let digitContainers = [];
        let isFirstLoad = true;

        /**
         * 主函数，用于驱动数字动画。
         */
        function animateNumber(containerId, targetNumber, duration = 500) {
            const container = document.getElementById(containerId);
            if (!container) return;
            if (typeof targetNumber !== 'number' || isNaN(targetNumber)) return;

            if (isFirstLoad) {
                initializeNumberDisplay(container, targetNumber, duration);
            } else {
                updateNumberDisplay(targetNumber, duration);
            }
            currentDisplayNumber = targetNumber;
            isFirstLoad = false;
        }

        /**
         * 初始化数字显示。所有数字从0滚动到目标值。
         */
        function initializeNumberDisplay(container, targetNumber, duration) {
            container.innerHTML = '';
            digitContainers = [];
            const digits = targetNumber.toString().split('');

            const numberWrapper = document.createElement('div');
            numberWrapper.style.cssText = 'display: flex; justify-content: center; align-items: center; gap: 4px; height: 100%;';
            container.appendChild(numberWrapper);

            digits.forEach((digitStr, index) => {
                const digit = parseInt(digitStr, 10);
                const digitContainer = createDigitContainer(numberWrapper);
                digitContainers.push(digitContainer);

                // 带延迟的初始动画
                setTimeout(() => {
                    updateSingleDigit(digitContainer, digit, duration);
                }, 100 + index * 100);
            });
        }

        /**
         * 更新数字显示。只滚动变化的数字，并处理位数的增减。
         */
        function updateNumberDisplay(newNumber, duration) {
            const newDigits = newNumber.toString().split('');
            const container = document.getElementById('total-number');
            const numberWrapper = container.querySelector('div');

            // 调整位数以匹配新数字
            while (newDigits.length > digitContainers.length) {
                const digitContainer = createDigitContainer(numberWrapper, true); // 在最前面添加
                digitContainers.unshift(digitContainer);
            }
            while (newDigits.length < digitContainers.length) {
                const digitContainer = digitContainers.shift(); // 从最前面移除
                digitContainer.remove();
            }

            // 现在位数保证匹配，逐一更新
            newDigits.forEach((digitStr, index) => {
                const newDigit = parseInt(digitStr, 10);
                const oldDigit = parseInt(digitContainers[index].dataset.currentValue, 10);
                if (newDigit !== oldDigit) {
                    updateSingleDigit(digitContainers[index], newDigit, duration);
                }
            });
        }

        /**
         * 创建单个数字位的DOM结构。
         */
        function createDigitContainer(parent, addToFront = false) {
            const digitContainer = document.createElement('div');
            digitContainer.className = 'innerNumberDiv';
            digitContainer.dataset.currentValue = '0';

            const scrollContainer = document.createElement('div');
            scrollContainer.className = 'scroll-container';
            scrollContainer.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; transition: transform 0ms ease-out; transform: translateY(0px);';

            // 添加两套0-9的数字以实现无缝滚动
            for (let j = 0; j < 2; j++) {
                for (let i = 0; i <= 9; i++) {
                    const numberDiv = document.createElement('div');
                    numberDiv.className = 'nubmerDiv';
                    const numberSpan = document.createElement('span');
                    numberSpan.textContent = i;
                    numberDiv.appendChild(numberSpan);
                    // 移除内联样式，让CSS样式生效
                    scrollContainer.appendChild(numberDiv);
                }
            }
            digitContainer.appendChild(scrollContainer);

            if (addToFront) {
                parent.insertBefore(digitContainer, parent.firstChild);
            } else {
                parent.appendChild(digitContainer);
            }
            return digitContainer;
        }

        /**
         * 使用“odometer”效果动画单个数字。
         */
        function updateSingleDigit(digitContainer, newDigit, duration) {
            const scrollContainer = digitContainer.querySelector('.scroll-container');
            if (!scrollContainer) return;

            const oldDigit = parseInt(digitContainer.dataset.currentValue, 10);
            // 使用CSS中定义的高度值，转换为vh单位
            const digitHeightVh = 4.5890410958904109589041095890411; // 对应CSS中的px2vh(67px)

            // 如果是进位（如9到0），滚动到第二套数字的目标，然后瞬间重置
            if (newDigit < oldDigit) {
                const targetPosition = (newDigit + 10) * digitHeightVh;
                scrollContainer.style.transition = 'transform ' + duration + 'ms ease-out';
                scrollContainer.style.transform = 'translateY(-' + targetPosition + 'vh)';

                setTimeout(() => {
                    scrollContainer.style.transition = 'transform 0ms';
                    const resetPosition = newDigit * digitHeightVh;
                    scrollContainer.style.transform = 'translateY(-' + resetPosition + 'vh)';
                }, duration);
            } else {
                // 正常向前滚动
                const targetPosition = newDigit * digitHeightVh;
                scrollContainer.style.transition = 'transform ' + duration + 'ms ease-out';
                scrollContainer.style.transform = 'translateY(-' + targetPosition + 'vh)';
            }

            digitContainer.dataset.currentValue = newDigit;
        }

        // 第一个updateTime函数已删除，使用下面DOMContentLoaded中的版本

        // 模拟获取总办理数的函数
        function getTotalNumber() {
            try {
                if (isFirstLoad) {
                    return 123456;
                } else {
                    const increment = Math.floor(Math.random() * 20) + 1; // 增加1-20的随机数
                    return currentDisplayNumber + increment;
                }
            } catch (error) {
                console.error('获取总办理数错误: ' + error.message);
                return currentDisplayNumber || 123456;
            }
        }

        // 定时更新总办理数
        function updateTotalNumber() {
            try {
                const newTotal = getTotalNumber();
                animateNumber("total-number", newTotal);
            } catch (error) {
                console.error('更新总办理数错误: ' + error.message);
            }
        }

        // 页面加载完成后初始化所有功能
        document.addEventListener('DOMContentLoaded', function () {
            console.log('DOMContentLoaded事件触发，开始初始化...');

            // 立即更新时间
            console.log('准备调用updateTime函数...');
            updateTime();

            // 每秒更新一次时间
            console.log('设置时间更新定时器...');
            setInterval(updateTime, 1000);

            // 初始化总数显示
            setTimeout(() => {
                console.log('开始初始化总数显示...');
                updateTotalNumber();
                setInterval(updateTotalNumber, 5000);
            }, 500);

            // 初始化ECharts图表
            setTimeout(() => {
                console.log('开始初始化ECharts图表...');
                initializeCharts();
            }, 1000);

            // 初始化滚动卡片的鼠标悬停暂停功能
            initScrollCardsHoverPause();

            // 初始化无限循环滚动
            initInfiniteScroll();
        });

        // 初始化滚动卡片的鼠标悬停暂停功能
        function initScrollCardsHoverPause() {
            const scrollContainers = document.querySelectorAll('.scroll-cards-container');

            scrollContainers.forEach(container => {
                const wrapper = container.querySelector('.scroll-cards-wrapper');

                if (wrapper) {
                    // 鼠标移入暂停滚动
                    container.addEventListener('mouseenter', () => {
                        wrapper.style.animationPlayState = 'paused';
                    });

                    // 鼠标移出继续滚动
                    container.addEventListener('mouseleave', () => {
                        wrapper.style.animationPlayState = 'running';
                    });
                }
            });
        }

        // 初始化无限循环滚动
        function initInfiniteScroll() {
            const scrollContainers = document.querySelectorAll('.scroll-cards-container');

            scrollContainers.forEach(container => {
                const wrapper = container.querySelector('.scroll-cards-wrapper');

                if (wrapper) {
                    // 克隆所有卡片
                    const cards = wrapper.querySelectorAll('.service-card');
                    const cardsArray = Array.from(cards);

                    // 复制卡片并添加到容器末尾，实现无缝循环
                    cardsArray.forEach(card => {
                        const clone = card.cloneNode(true);
                        wrapper.appendChild(clone);
                    });

                    // 调整动画速度，根据卡片数量动态设置
                    const animationDuration = Math.max(20, cardsArray.length * 3);
                    wrapper.style.animationDuration = animationDuration + 's';

                    // 确保卡片布局正确
                    // const cardWidth = cardsArray[0].offsetWidth;
                    // const containerWidth = container.offsetWidth;
                    // const cardsPerRow = Math.floor(containerWidth / cardWidth);

                    // 设置wrapper宽度，确保每行显示正确数量的卡片
                    wrapper.style.width = '100%';
                }
            });
        }

        // 确保updateTime函数正确获取和设置时间
        function updateTime() {
            console.log('updateTime函数被调用');
            const datetimeElement = document.getElementById("datetime");
            console.log('获取到的datetime元素:', datetimeElement);

            if (!datetimeElement) {
                console.error("未找到 id 为 'datetime' 的元素");
                return;
            }

            const now = new Date();
            const y = now.getFullYear();
            const m = String(now.getMonth() + 1).padStart(2, "0");
            const d = String(now.getDate()).padStart(2, "0");
            const h = String(now.getHours()).padStart(2, "0");
            const min = String(now.getMinutes()).padStart(2, "0");
            const s = String(now.getSeconds()).padStart(2, "0");
            const weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
            const timeString = y + '-' + m + '-' + d + '- ' + weekArr[now.getDay()] + ' ' + h + ':' + min + ':' + s;

            console.log('准备设置时间:', timeString);
            datetimeElement.textContent = timeString;
            console.log('时间已更新，当前显示:', datetimeElement.textContent);
        }

        // ECharts图表初始化函数
        function initializeCharts() {
            initBusinessTrendChart();
            initPersonnelTypeChart();
            initTodayNumberTrendChart();
            initDepartmentAnalysisChart();
            initBusinessAnalysisChart();
            initFutureReservationChart();
        }

        // 1. 窗口业务办理趋势 - 双柱状图
        function initBusinessTrendChart() {
            const chartDom = document.getElementById('left-bar1');
            if (!chartDom) return;

            const myChart = echarts.init(chartDom);
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    top: '25%',
                    left: '10%',
                    right: '10%',
                    bottom: '10%',
                    containLabel: true
                },
                legend: {
                    data: ['总量', '日均'],
                    textStyle: {
                        color: '#fff',
                        fontSize: 10
                    },
                    top: '5%',
                    left: '10%',
                    icon: 'rect',
                    itemWidth: 15,
                    itemHeight: 2
                },
                xAxis: {
                    type: 'category',
                    data: ['上月', '本月'],
                    axisLine: {
                        lineStyle: {
                            color: '#4BC7FF'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 9,
                        interval: 0,
                        // rotate: -10
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    // max: 80,
                    axisLine: {
                        lineStyle: {
                            color: '#4BC7FF'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(75, 199, 255, 0.2)'
                        }
                    }
                },
                series: [
                    {
                        name: '总量',
                        type: 'bar',
                        data: [1320, 1632],
                        itemStyle: {
                            color: 'rgba(99, 242, 254, 1)'
                        },
                        barWidth: '30%'
                    },
                    {
                        name: '日均',
                        type: 'bar',
                        data: [220, 182],
                        itemStyle: {
                            color: 'rgba(255, 111, 62, 1)'
                        },
                        barWidth: '30%'
                    }
                ]
            };
            myChart.setOption(option);

            // 响应式调整
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
        // 申办人员类型 - 环状图
        function initPersonnelTypeChart() {
            const chartDom = document.getElementById('left-bar3');
            if (!chartDom) return;

            const myChart = echarts.init(chartDom);
            // 计算总数
            const totalValue = 1430;
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: '10%',
                    top: 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: 11
                    },
                    itemWidth: 12,
                    itemHeight: 8
                },
                series: [{
                    name: '申办人员类型',
                    type: 'pie',
                    // radius: ['40%', '70%'], // 内外半径，实现环形效果
                    center: ['40%', '50%'],  // 调整圆环中心点位置
                    avoidLabelOverlap: true, // 防止标签重叠
                    data: [
                        { value: 645, name: '教师', itemStyle: { color: 'rgba(99, 242, 254, 1)' } },
                        { value: 500, name: '学生', itemStyle: { color: 'rgba(255, 111, 62, 1)' } },
                        { value: 285, name: '其他', itemStyle: { color: 'rgba(91, 143, 249, 1)' } }
                    ],
                    label: {
                        show: false // 不显示标签
                    },
                    labelLine: {
                        show: false // 不显示指示线
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            
            // 添加中心文字
            option.graphic = [
                {
                    type: 'group',
                    right: 0,  // 使用像素值定位
                    bottom:  0,   // 使用像素值定位
                    z: 100,  // 设置层级，确保文字在环状图前面
                    children: [
                        {
                            type: 'text',
                            style: {
                                text: '总数量',
                                textAlign: 'center',
                                fill: '#fff',
                                fontSize: 12
                            },
                            left: 'center',
                            top: -10
                        },
                        {
                            type: 'text',
                            style: {
                                text: '1,430',
                                textAlign: 'center',
                                fill: '#63F2FE',
                                fontSize: 14,
                                fontWeight: 'bold'
                            },
                            left: 'center',
                            top: 10
                        }
                    ]
                }
            ];
            
            // 恢复数值线和标签
            option.series[0].label = {
                show: true,
                formatter: function (params) {
                    return params.name + ':' + params.value;
                },
                color: '#fff',
                fontSize: 12
            };
            
            option.series[0].labelLine = {
                show: true,
                length: 10,
                length2: 15,
                lineStyle: {
                    color: '#fff',
                    width: 1
                }
            };
            myChart.setOption(option);

            // 响应式调整
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
        // 今日取号时间趋势
        function initTodayNumberTrendChart() {
            const chartDom = document.getElementById('right-line1');
            if (!chartDom) return;

            const myChart = echarts.init(chartDom);
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    top: '25%',
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                legend: {
                    data: ['现场取号', '预约取号'],
                    textStyle: {
                        color: '#fff',
                        fontSize: 10
                    },
                    top: '8%',
                    left: '10%',
                    icon: 'rect',
                    itemWidth: 15,
                    itemHeight: 2
                },
                xAxis: {
                    type: 'category',
                    data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
                    axisLine: {
                        lineStyle: {
                            color: '#4BC7FF'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#4BC7FF'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    }
                },
                // tooltip: {
                //     trigger: 'axis',
                //     backgroundColor: 'rgba(0,0,0,0.8)',
                //     borderColor: '#4BC7FF',
                //     textStyle: {
                //         color: '#fff'
                //     }
                // },
                series: [
                    {
                        name: '现场取号',
                        type: 'line',
                        data: [15, 25, 35, 45, 55, 40, 50, 60, 45, 30, 20],
                        lineStyle: {
                            color: '#569DEE',
                            width: 2
                        },
                        itemStyle: {
                            color: '#569DEE'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(86, 157, 238, 1)' },
                                { offset: 1, color: 'rgba(86, 157, 238, 0)' }
                            ])
                        },
                        symbol: 'none'
                    },
                    {
                        name: '预约取号',
                        type: 'line',
                        data: [10, 20, 30, 40, 50, 35, 45, 55, 40, 25, 15],
                        lineStyle: {
                            color: 'rgba(237, 120, 76, 1)',
                            width: 2
                        },
                        itemStyle: {
                            color: '#5AD8A6'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(237, 120, 76, 1)' },
                                { offset: 1, color: 'rgba(237, 120, 76, 0)' }
                            ])
                        },
                        symbol: 'none'
                    }
                ]
            };
            myChart.setOption(option);

            // 响应式调整
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
        // 今日窗口业务办理趋势
        function initDepartmentAnalysisChart() {
            const chartDom = document.getElementById('right-line2');
            if (!chartDom) return;

            const myChart = echarts.init(chartDom);
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    top: '15%',
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
                    axisLine: {
                        lineStyle: {
                            color: '#4BC7FF'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 9,
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#4BC7FF'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.3)'
                        }
                    }
                },
                // tooltip: {
                //     trigger: 'axis',
                //     backgroundColor: 'rgba(0,0,0,0.8)',
                //     borderColor: '#4BC7FF',
                //     textStyle: {
                //         color: '#fff'
                //     }
                // },
                series: [{
                    type: 'line',
                    data: [25, 45, 65, 55, 35, 45, 55, 40, 30, 20],
                    lineStyle: {
                        color: '#4BC7FF',
                        width: 2
                    },
                    itemStyle: {
                        color: '#4BC7FF'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(86, 157, 238, 1)' },
                            { offset: 1, color: 'rgba(86, 157, 238, 0)' }
                        ])
                    },
                    symbol: 'circle',
                    symbolSize: 5
                }]
            };
            myChart.setOption(option);

            // 响应式调整
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
        // 近7日窗口业务办理量
        function initBusinessAnalysisChart() {
            const chartDom = document.getElementById('right-bar2');
            if (!chartDom) return;

            const myChart = echarts.init(chartDom);
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    top: '15%',
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                // legend: {
                //     textStyle: {
                //         color: '#fff',
                //         fontSize: 10
                //     },
                //     top: '8%',
                //     left: '10%',
                //     icon: 'rect',
                //     itemWidth: 15,
                //     itemHeight: 2
                // },
                xAxis: {
                    type: 'category',
                    data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
                    axisLine: {
                        lineStyle: {
                            color: '#4BC7FF'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 9,
                        interval: 0,
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#4BC7FF'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(75, 199, 255, 0.2)'
                        }
                    }
                },
                series: [
                    {
                        name: '已办理',
                        type: 'bar',
                        data: [45, 40, 35, 30, 20, 10, 50],
                        itemStyle: {
                            color: 'rgba(99, 242, 254, 1)'
                        },
                        barWidth: '60%',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#fff',
                            fontSize: 10
                        }
                    }
                ]
            };
            myChart.setOption(option);

            // 响应式调整
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
        // 未来7天预约量趋势
        function initFutureReservationChart() {
            const chartDom = document.getElementById('right-line3');
            if (!chartDom) return;

            const myChart = echarts.init(chartDom);
            const option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    top: '15%',
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日', '7月7日'],
                    axisLine: {
                        lineStyle: {
                            color: '#4BC7FF'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    axisLine: {
                        lineStyle: {
                            color: '#4BC7FF'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 10
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(75, 199, 255, 0.2)'
                        }
                    }
                },
                series: [
                    {
                        name: '预约量',
                        type: 'line',
                        data: [60, 55, 65, 70, 50, 45, 40],
                        lineStyle: {
                            color: 'rgba(237, 120, 76, 1)',
                            width: 2
                        },
                        itemStyle: {
                            color: '#63F2FE'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(237, 120, 76, 1)' },
                                { offset: 1, color: 'rgba(237, 120, 76, 0)' }
                            ])
                        },
                        symbol: 'none'
                    }
                ]
            };
            myChart.setOption(option);

            // 响应式调整
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
    </script>
</body>

</html>